<template>
  <custom-title-bar title="订单" background-color="#ffd350" :hidden-back="true" />
  <!--标题-->
  <view class="container" :style="{ top: capsule.bottom + 'px' }">
    <view style="background: linear-gradient(to bottom, #ffd350, #ededed 80%)">
      <view class="order-search">
        <view class="input">
          <uni-icons type="search" size="17"></uni-icons>
          <input
            type="text"
            class="input-placeholder"
            placeholder="搜索订单"
            v-model="page.keyword"
            confirm-type="search"
            @confirm="onSearch()"
          />
          <!-- <span class="input-placeholder">搜索订单</span> -->
        </view>
      </view>
      <view class="list-title">
        <span class="title-text" :class="{ 'active-list-title': !isSearchMode }" @click="clickAllHistoryOrder"
          >全部订单</span
        >
        <span class="title-text active-list-title" v-if="isSearchMode">搜索结果</span>
      </view>
    </view>
    <!-- scrolltolower触底，refresherrefresh下拉刷新 -->
    <scroll-view
      :refresher-enabled="true"
      @scrolltolower="pullUpLoading"
      :scroll-y="true"
      class="order-list"
      @refresherrefresh="pullToRefresh()"
      :refresher-triggered="isTriggered"
    >
      <order-item
        class="order-item"
        :data="orderInfo"
        v-for="orderInfo in listData?.list"
        :key="orderInfo.id"
        :search-mode="isSearchMode"
        :keyword="page.keyword"
      />
      <view class="page-bottom-tis">
        {{ isNonPullUp ? (isSearchMode ? '没有更多的搜索结果~' : '没有更多历史订单了~') : '正在加载中...' }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import $API from '@/api'
import { OrderListForUserPage } from '@/types/param/order'
import CustomTitleBar from '@/components/custom-title-bar/index.vue'
const { capsule } = $store.app.getSystemParam()
import $store from '@/store'
import OrderItem from './components/order-item/index.vue'
import type { PageResponse } from '@/types/generic/PageResponse'
import type { OrderForUser } from '@/types/response/order'
import { $modal } from '@/plugins'
const page = ref(new OrderListForUserPage())
const listData = ref<PageResponse<OrderForUser>>()
page.value.pageSize = 5
// 是否可上拉
const isNonPullUp = computed(
  () =>
    listData.value?.total != null &&
    page.value.currentPage >= Math.ceil(parseInt(listData.value?.total + '') / page.value.pageSize)
)
const isTriggered = ref(false)
// 下拉刷新状态
async function pullToRefresh() {
  page.value.currentPage = 1
  // 开启动画
  isTriggered.value = true
  await requestOrderList(false)
  isTriggered.value = false
}
// 监听订单列表需要刷新事件
$store.order.orderListRefreshEvent.on(pullToRefresh)
// 上拉加载
function pullUpLoading() {
  if (isNonPullUp.value) return
  page.value.currentPage++
  requestOrderList(true)
}
// 是否为搜索
const isSearchMode = ref(false)
// 取消搜索模式-所有订单
function clickAllHistoryOrder() {
  isSearchMode.value = false
  page.value.keyword = ''
  page.value.currentPage = 1
  requestOrderList()
}
// 当点击回车搜索
function onSearch() {
  if (page.value.keyword === '') {
    // 如果搜索空串，退出搜索模式
    clickAllHistoryOrder()
    return
  }
  isSearchMode.value = true
  page.value.currentPage = 1
  requestOrderList(false)
}
// 列表数据请求
async function requestOrderList(isAppend = false) {
  const result = await $API.order.list(page.value)
  if (!result.success) {
    $modal.toastErrorMsg(result.message)
    return
  }
  if (isAppend) {
    listData.value!.list.push(...result.data.list)
    listData.value!.total = result.data.total
  } else {
    listData.value = result.data
  }
}
onMounted(() => {
  requestOrderList()
})
</script>

<style scoped lang="scss">
.container {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  background-color: #ededed;
  flex-direction: column;
}

.order-search {
  $order-search-height: 100rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: $order-search-height;

  .input {
    display: flex;
    align-items: center;

    $input-height: $order-search-height * 0.7;

    padding: 0 30rpx;
    box-sizing: border-box;
    width: 85%;
    height: $input-height;
    font-size: $input-height * 0.4;
    border-radius: $input-height * 0.5;
    color: #333;
    background-color: #fff;
    line-height: $input-height;

    .input-placeholder {
      display: inline-block;
      margin: 0 10rpx;
      flex-grow: 1;
    }
  }
}

.list-title {
  display: flex;
  justify-content: flex-start;
  margin: 0 auto;
  width: 80%;
  font-size: 25rpx;

  .title-text {
    display: block;
    margin-right: 25rpx;
    height: 80rpx;
    line-height: 80rpx;
  }
}

.active-list-title {
  font-weight: 700;
}

.order-list {
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 100vw;
  flex-grow: 1;
  flex-direction: column;
  height: 0;

  .page-bottom-tis {
    width: 100%;
    height: 80rpx;
    font-size: 25rpx;
    text-align: center;
    color: #333;
    line-height: 80rpx;
  }
}
</style>
